<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-for="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue/vue.js"></script>
</head>
<body>

<div id="app" >
    <ul>
        <li v-for="e in emps" v-on:click="clickVue()"/>
        {{e.id}}-{{e.name}}-{{e.age}}-{{e.sex | sexFilter }}
    </ul>

    <!--v-on：click可以简写成  @click-->
    <ul>
        <li v-for="e in emps" @click="clickVue()"/>
        {{e.id}}-{{e.name}}-{{e.age}}-{{e.sex | sexFilter}}
    </ul>


</div>

<script>

    //全局应用（一般在开发中很少使用）
    Vue.filter('sexFilter',function (value) {
        if (value == 1){
            return "boy";
        }else if (value == 0){
            return "girl";
        }
        return "保密";
    });

    var vue = new Vue({
        el:"#app",
        data:{
            arr:["a","b","c","d","e"],
            emps:[
                {id:1,name:'dafei', age:18, sex:1},
                {id:2,name:'xiaofei', age:17, sex:1},
                {id:3,name:'huisiji', age:18, sex:0},
                {id:4,name:'xiaoxue', age:19, sex:0}
            ]
        },
        methods:{
            clickVue:function () {
                alert(1);
            }
        },

        //局部应用（一般在开发中使用的多）
        filters:{
            sexFilter:function (value) {
                if (value == 1){
                    return "boy";
                }else if (value == 0){
                    return "girl";
                }
                return "保密";
            }
        }
    })
</script>
</body>
</html>